<template>
  <div class="dashboard-container">
    <el-row :gutter="40">
      <!-- 左侧个人排行榜 -->
      <el-col :span="12">
        <el-card class="ranking-card">
          <div slot="header" class="card-header">
            <span>本月个人排行榜</span>
          </div>
          <div v-for="(person, index) in personalRanking" :key="index" class="ranking-item">
            <el-image
              style="width: 40px; height: 40px;line-height: 40px;"
              :src="noticeImg"></el-image>
            <div class="ranking-info">
              <span class="name">{{ person.userName }}</span>
              <span class="department">{{ person.deptName }}</span>
            </div>
            <span class="amount">${{ person.rateMoney }}</span>
          </div>
        </el-card>
      </el-col>
      <!-- 右侧团队排行榜 -->
      <el-col :span="12">
        <el-card class="ranking-card">
          <div slot="header" class="card-header">
            <span>本月团队排行榜</span>
          </div>
          <div v-for="(team, index) in teamRanking" :key="index" class="ranking-item">
            <el-image
              style="width: 40px; height: 40px;line-height: 40px;"
              :src="noticeImg"></el-image>
            <div class="ranking-info">
              <span class="name">{{ team.deptName }}</span>
              <span class="department"> </span>
            </div>
            <span class="amount">{{ team.rateMoney }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 统计信息区域 -->
    <el-row :gutter="20" style="margin-top: 20px;display: flex;">
      <!-- 左侧统计表格 -->
      <el-col :span="10" style="flex: 1; overflow: hidden;">
        <div class='table-container'>
          <el-table :data="statTableData" border style="width: 100%;" :cell-style="{padding: '20px 0'}"  >
            <el-table-column align="center" prop="date" label="日期"></el-table-column>
            <el-table-column align="center" prop="pushCount" label="推送客户数"></el-table-column>
            <el-table-column align="center" prop="followCount" label="跟进次数"></el-table-column>
            <el-table-column align="center"  prop="loanCount" label="放款总额"></el-table-column>
            <el-table-column align="center" prop="visitCount" label="上门量"></el-table-column>
          </el-table>
        </div>

      </el-col>
      <!-- 右侧统计卡片 -->
      <el-col :span="14" >
        <el-row :gutter="20" style='height: 300px;' >
          <el-col :span="8">
            <el-card class="stat-card" style='background-color:#e6f7ff '>
              <div class="stat-title">放款总额 </div>
              <div class="stat-value">{{ data.loanMoney }}</div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="stat-card" style='background-color:#fff7e6 '>
              <div class="stat-title">放款次数 </div>
              <div class="stat-value">{{ data.loanCount }}</div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="stat-card" style='background-color:#e6f0ff'>
              <div class="stat-title">佣金总额 </div>
              <div class="stat-value">{{ data.rateMoney }}</div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="stat-card" style='background-color:#f5e6ff'>
              <div class="stat-title">上门次数 </div>
              <div class="stat-value">{{ data.smCount }}</div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="stat-card" style='background-color:#e6f0ff'>
              <div class="stat-title">客户数量 </div>
              <div class="stat-value">{{ data.customCount }}</div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="stat-card" style='background-color:#fff0e6 '>
              <div class="stat-title">签约数量 </div>
              <div class="stat-value">{{ data.qyCount }}</div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>

import { listDeptRateMoney, listRateMoneyBack } from '@/api/custom/back'
import { getCount, getTableCount } from '@/api/custom'

export default {
  name: 'Index',
  components: {

  },
  data() {
    return {
      personalRanking: [
      ],
      teamRanking: [
      ],
      noticeImg: require('@/assets/images/pahang.png'),
      statTableData: [],
      data:{},
      statistics: [
        { title: '放款总额', value: '￥0', ratio: '环比 ↓100%', color: '#e6f7ff' },
        { title: '放款次数', value: '0', ratio: '环比 ↓100%', color: '#f0f7e6' },
        { title: '佣金总额', value: '￥0', ratio: '环比 ↓100%', color: '#fff7e6' },
        { title: '上门次数', value: '1', ratio: '环比 ↓63.64%', color: '#f5e6ff' },
        { title: '客户数量', value: '2', ratio: '环比 ↓12.50%', color: '#e6f0ff' },
        { title: '签约数量', value: '0', ratio: '环比 ↓63.64%', color: '#fff0e6' }
      ]
    };
  },
  created(){
    this.getPersonalRanking();
    this.getDeptRanking();
    this.getIndexTableCount();
    this.getIndexCount();
  },
  methods: {
    //个人排行榜根据业务员佣金来,也就是回款的百分比计算而得的那个个人佣金
    getPersonalRanking(){
      listRateMoneyBack().then(response => {
        this.personalRanking = response.data;
      });
    },
    getDeptRanking(){
      listDeptRateMoney().then(response =>{
        this.teamRanking = response.data;
      })
    },
    getIndexTableCount(){
      getTableCount().then(response =>{
       const data = response.data;
        const obj1 =  { date: '今日', pushCount:data.customCountToday , followCount: data.recordCountToday, loanCount: data.loanMoneyToday, visitCount: data.callCountToday };
        const  obj2 =  { date:'昨日', pushCount: data.customCountYesterday, followCount: data.recordCountYesterday, loanCount: data.loanMoneyYesterday, visitCount: data.callCountYesterday };
        const  obj3 =  { date:'本周', pushCount: data.customCountWeek, followCount: data.recordCountWeek, loanCount: data.loanMoneyWeek, visitCount: data.callCountWeek };
        const  obj4 =  { date:'本月', pushCount: data.customCountMonth, followCount: data.recordCountMonth, loanCount: data.loanMoneyMonth, visitCount: data.callCountMonth };
        this.statTableData.push(obj1);
        this.statTableData.push(obj2);
        this.statTableData.push(obj3);
        this.statTableData.push(obj4);
      })
    },
    getIndexCount(){
      getCount().then(response =>{
        this.data = response.data;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.dashboard-container {
  padding: 30px;
  margin:30px;
}

.table-container{
  display: flex;
  flex-direction: column;
}

.el-table{
  height: 300px;
  font-size: 15px;
}

.el-table tr{
  padding: 10px;
}

.table-container .el-table {
  flex: 1;
  height: 0; /* 防止表格内容溢出 */
}

.ranking-card {
  margin-bottom: 20px;
}

.card {
  margin-bottom: 20px;
  height: 300px;
}

.card-header {
  font-size: 16px;
  font-weight: bold;
}

.ranking-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.ranking-info {
  flex: 1;
  margin-left: 10px;
}

.name {
  display: block;
  font-weight: bold;
}

.department {
  display: block;
  color: #999;
  font-size: 12px;
}

.amount {
  font-weight: bold;
  margin-right: 20px;
}

.stat-table-card {
  margin-bottom: 20px;
}

.stat-card {
  color: #333;
  padding: 20px;
  margin-bottom: 20px;
  text-align: center;
  height: 140px;
}

.stat-title {
  font-size: 14px;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 24px;
  margin-bottom: 5px;
}

.stat-ratio {
  font-size: 12px;
  color: #999;
}
@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
